<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script type="text/javascript">
	new Ext.Button(
			{
				renderTo : 'download-chipseq-<s:property value="sampleDetail.id" />',
				text : 'Download Peak File (BED)',
				listeners : {
					'click' : function() {
						oIFrm = document
								.getElementById('myIFrm-<s:property value="sampleDetail.id" />');
						oIFrm.src = 'TableBrowser/GetSamplePeakBED?sampleId=<s:property value="sampleDetail.id" />';
					}
				}
			});

	new Ext.Button(
			{
				renderTo : 'download-density-<s:property value="sampleDetail.id" />',
				text : 'Download Density File (Big BED)',
				listeners : {
					'click' : function() {
						oIFrm = document
								.getElementById('myIFrm-<s:property value="sampleDetail.id" />');
						oIFrm.src = 'TableBrowser/GetSampleDensityBED?sampleId=<s:property value="sampleDetail.id" />';
					}
				}
			});

	new Ext.Button(
			{
				renderTo : 'graph-<s:property value="sampleDetail.id" />',
				text : 'Show graph in UCSC browser',
				listeners : {
					'click' : function() {
						// add new panel
				idText = 'graph-<s:property value="sampleDetail.id" />';
				if (centerPanel.getItem(idText))
					centerPanel.activate(centerPanel.getItem(idText));
				else
					centerPanel
							.add(
									new Ext.ux.ManagedIFramePanel(
											{
												id : idText,
												bodyStyle : 'padding:15px',
												title : '<s:property value="sampleDetail.id" /> Graph',
												layout : 'fit',
												// iconCls : 'tabs',
												closable : true,
												defaultSrc : 'http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg18&hgt.customText=http://dl403m-1.cmb.usc.edu:8180/iRegulome/TableBrowser/GetSamplePeakBED?sampleId=<s:property value="sampleDetail.id" />%26forGraph=true',
												loadMask : false
											})).show();
			}
		}
			});

	new Ext.Panel( {
		frame : true,
		applyTo : 'attribute-<s:property value="sampleDetail.id" />',
		title : 'Sample Attributes',
		contentEl : 'attribute-content-<s:property value="sampleDetail.id" />',
		collapsible : true,
		collapsed : true,
		collapseFirst : true,
		titleCollapse : true
	});
</script>
</head>
<body>
<div style="border: 2px solid; border-color: #CDDBF0;">
<div
	style="background-color: #CDDBF0; color: #15428B; font-family: tahoma, arial, verdana, sans-serif; font-size: 20px; font-weight: bold;">Sample
Information</div>
<b>Sample ID:</b>&nbsp;&nbsp; <a href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=sra&term=<s:property value="sampleDetail.id" />" target="_blank"><s:property value="sampleDetail.id" /></a><br>
<b>Alias:</b>&nbsp;&nbsp; <s:property value="sampleDetail.alias" /><br>
<b>Intrumental Model:</b>&nbsp;&nbsp; <s:property
	value="sampleDetail.instrumentModel" /><br>
<b>Taxon Id:</b>&nbsp;&nbsp; <s:property value="sampleDetail.taxonid" /><br>
<b>Cell Type:</b>&nbsp;&nbsp; <s:property value="sampleDetail.cellType" /><br>
<b>Factor:</b>&nbsp;&nbsp; <s:property value="sampleDetail.factor" /><br>

<b>Description:</b>&nbsp;&nbsp; <s:property
	value="sampleDetail.description" /><br>

<b>Data URL:</b>&nbsp;&nbsp; <a href="ftp://<s:property value="sampleDetail.url" />" target="_blank"><s:property value="sampleDetail.url" /></a><br>

<div id="attribute-<s:property value="sampleDetail.id" />">
<div id="attribute-content-<s:property value="sampleDetail.id" />">
<s:iterator value="attrs" status="attrsT">
	&nbsp;&nbsp;<s:property value="tag" />: &nbsp;&nbsp; <s:property
		value="value" />
	<br>
</s:iterator></div>

</div>
</div>


<div style="padding-top: 10px;">
<div style="border: 2px solid; border-color: #CDDBF0;">
<div
	style="background-color: #CDDBF0; color: #15428B; font-family: tahoma, arial, verdana, sans-serif; font-size: 20px; font-weight: bold;">Study
Information</div>
<b>Study ID:</b>&nbsp;&nbsp; <a href="http://www.ncbi.nlm.nih.gov/Traces/sra/sra.cgi?study=<s:property value="studyDetail.id" />" target="_blank"><s:property value="studyDetail.id" /></a><br>
<b>Title:</b>&nbsp;&nbsp; <s:property value="studyDetail.title" /><br>
<b>Type:</b>&nbsp;&nbsp; <s:property value="studyDetail.type" /><br>
<b>Library Strategy:</b>&nbsp;&nbsp; <s:property
	value="studyDetail.libraryStrategy" /><br>
<b>Study Type:</b>&nbsp;&nbsp; <s:property value="studyDetail.studyType" /><br>
<b>Description:</b>&nbsp;&nbsp; <s:property
	value="studyDetail.description" /><br>
</div>
</div>

<div style="padding-top: 10px;"><s:if test="chipSeqStat==null">
	<div style="border: 2px solid; border-color: #CDDBF0;">
	<div
		style="background-color: #CDDBF0; color: #15428B; font-family: tahoma, arial, verdana, sans-serif; font-size: 20px; font-weight: bold;">This
	is not a ChIP-Seq !</div>
	</div>
</s:if> <s:else>
	<div style="border: 2px solid; border-color: #CDDBF0;">
	<div
		style="background-color: #CDDBF0; color: #15428B; font-family: tahoma, arial, verdana, sans-serif; font-size: 20px; font-weight: bold;">ChIP-Seq
	Statistic Information</div>
	<b>Number of Peaks:</b>&nbsp;&nbsp; <s:property
		value="chipSeqStat.peaks" /><br>
	<b>Number of Broad Peaks:</b>&nbsp;&nbsp; <s:property
		value="chipSeqStat.broadPeaks" /><br>
	<b>Number of Mapping Reads:</b>&nbsp;&nbsp; <s:property
		value="chipSeqStat.mappingReads" /><br>
	<b>Number of Total Reads:</b>&nbsp;&nbsp; <s:property
		value="chipSeqStat.totalReads" /><br>
	<div id="download-chipseq-<s:property value="sampleDetail.id" />"></div>
	<div id="download-density-<s:property value="sampleDetail.id" />"></div>
	<div id="graph-<s:property value="sampleDetail.id" />"></div>
	</div>

	<iframe id="myIFrm-<s:property value="sampleDetail.id" />" src=""
		style="visibility: hidden"></iframe>
</s:else></div>


</body>
</html>